<!DOCTYPE html>
<html class="am-touch js cssanimations">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>快快车管家</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="renderer" content="webkit" />
    <link rel="icon" type="image/png" href="../assets/i/favicon.png" />
    <link rel="stylesheet" href="../assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="../assets/css/app2.css" />
    <link rel="stylesheet" href="../assets/css/icon.css"/>
    <style type="text/css">
        p{margin: 0;}
        ul, li{padding: 0;margin: 0;list-style: none}
        .am-list h2,.am-list p{font-size: 1.2rem;line-height: 1.8rem;}
        section#kuaikuai-tab .am-tabs-bd .am-tab-panel{background-color: #eee}
        .navList{display: flex;padding: 10px 0;}
        hr{margin: 0;}
        i.iconN{width:20px;height:20px;margin-right:5px;display:inline-block;vertical-align: middle;width:20px;height:20px;margin-right:5px;background-size:100% 100%;display:inline-block;vertical-align: middle;}
        i.addr{background:url("../assets/i/icon/address.png") no-repeat;background-size:100% 100%;}
        i.timer{background:url("../assets/i/icon/time.png") no-repeat;background-size:100% 100%;}
        [class*=am-u-]{padding-left:0;padding-right: 0;}
        .green{font-weight: normal;color: #09bb07 !important}
        .content-btn button{width: 35%;height: 30px; line-height: 30px;margin: 5px 0;color: #a6a6a6;background-color: #FFFFFF;}
        .am-btn{font-size: 1.4rem;}
        .am-btn-danger{background-color: #fc6156 !important; color: #FFFFFF !important;}
        .text-sm{font-size: 1.4rem;line-height: 25px;margin-right: 15px;}
        .am-list-news-default{margin: 0;}
        .help{width: 100%; display: block; text-align: center;margin: 30px 0}
        .btn-help{background-color: #ffffff;border: #dedfe0;padding: 10px 20px; color: #a6a6a6;border-radius: 5px;}
        @font-face{
            font-family: 'icomoon';
            src:url('../assets/fonts/icomoon.eot');                                       /* IE9*/
            src:url('../assets/fonts/icomoon.eot?#iefix') format('embedded-opentype'),    /* IE6-IE8 */
            url('../assets/fonts/icomoon.woff') format('woff'),      /* chrome、firefox */
            url('../assets/fonts/icomoon.ttf') format('truetype'),   /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('../assets/fonts/icomoon.svg#iconfont') format('svg');  /* iOS 4.1- */
            font-weight: normal;
            font-style: normal;
        }
        .ui-fonts{
            font-family: 'icomoon';
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            font-size: 24px;
            color: #999999;
            margin-right: 5px;
        }

        .icon-un{
            color: #EEA415;
        }

        #kuaikuai-textarea textarea{width:100%;border-radius:5px;padding:5px 10px;background-color:#f0f0f0;border:none;font-size:1.4rem}
        #kuaikuai-textarea span{display:block;margin:5px 0}
        #kuaikuai-textarea span em{font-style:normal;font-weight:bold;display:inline-block;margin:0 5px}
        section.kuaikuai-btn2 button.btn{width: 100%;}
    </style>
</head>
<body>
<div style="padding: 0 15px;background-color: #fff;margin-top: 10px;">
    <div class="navList clearfix">
        <aside class="am-u-sm-3 am-list-thumb no-right-p">
            <img src="../assets/i/examples/123.png" style="border-radius: 8px;" alt="" />
        </aside>
        <section class="am-u-sm-9 am-list-main">
            <p class="am-text-sm" style="color: #000">姓名：陈光&nbsp;&nbsp;工号: SZ0001<span class="am-fr green">服务完成</span></p>
            <p class="am-text-sm">驾龄：7年</p>
            <p class="am-text-sm">电话：15600153257</p>
        </section>
    </div>
    <hr />
    <div class="navList clearfix">
        <ul>
            <li style="margin-bottom: 5px;"><p class="am-text-sm"><i class="iconN addr"></i>广东省深圳市南山区南海大道南段</p></li>
            <li><p class="am-text-sm"><i class="iconN timer"></i>2015-06-06&nbsp;&nbsp;&nbsp;&nbsp;14:30-15:00</p></li>
        </ul>
    </div>
</div>

<div style="padding: 0 15px 10px;background-color: #fff;margin-top: 10px;">
    <div class="navList">
        <section class="text-sm">评价星级</section>
        <div id="star">
            <ul id="list">
                <i class="ui-fonts icon-un">&#xe602</i>
                <i class="ui-fonts icon-un">&#xe602</i>
                <i class="ui-fonts icon-un">&#xe602</i>
                <i class="ui-fonts icon-un">&#xe602</i>
                <i class="ui-fonts icon-un">&#xe602</i>
            </ul>
        </div>
    </div>
    <section id="kuaikuai-textarea" class="am-list-news am-list-news-default am-form-group">
        <textarea class="" rows="4" id="doc-ta-1" placeholder="您的评价对我们的提升有很大帮助"></textarea>
    </section>
    <section class="kuaikuai-btn2" style="margin: 15px 0">
        <button type="submit" class="btn am-btn am-btn-danger am-btn-lg am-btn-buy">预约接车</button>
    </section>
</div>
<div class="help">
    <button class="btn-help am-text-sm">需要帮助？</button>
</div>
<script src="../assets/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        //  星星评价
        var iStar = 5;

        $li = $('#list').find('i');
        for(var i = 1; i <= $li.length; i++) {
            $li[i - 1].index = i;
            $($li[i - 1]).on('click', function () {
                fnPoint(this.index);
            });
        }

        //  评分处理
        function fnPoint(iArg)
        {
            //分数赋值
            iScore = iArg || iStar;
            for (i = 0; i < $li.length; i++) $li[i].className = i < iScore ? "ui-fonts icon-un" : "ui-fonts";
        }

        $('#star > ul#list').on('touchmove', function() {
            var iArg = 0;
            var x = event.targetTouches[0].pageX;
            if (x < 120) {
                iArg = 1;
                fnPoint(iArg);
            } else if (x < 150) {
                iArg = 2;
                fnPoint(iArg);
            } else if (x < 180) {
                iArg = 3;
                fnPoint(iArg);
            } else if (x < 210) {
                iArg = 4;
                fnPoint(iArg);
            } else if (x < 250) {
                iArg = 5;
                fnPoint(iArg);
            }
        });

        $(".btn-help").click(function() {
            window.location.href = "tel://4006606580";
        });
    });
</script>
</body>
</html>